<template>
    <Card>
        <edit-recom-fert
                :okModal="okModal"
                :cancelModal="cancelModal"
                :fromItem="fromItem"
        ></edit-recom-fert>

        <Row slot="title" >
            <div style="display: inline;cursor: pointer;margin-right: 10px;" @click="returnLastPage" >
                <Icon type="chevron-left"></Icon>
                返回
            </div>
                <!--<Icon type="clipboard" align="center"></Icon>-->
                <!--枸杞-推荐施肥方案-->
                <Button type="info"  size="small" icon="plus" @click="add">添加</Button>
        </Row>
        <Table height="640" :border="true" :columns="table_titles" :data="table_data" id="table"></Table>
    </Card>
</template>
<style>
    .tv-cell {
        width: 100%;
        height: 100%;
    }

    #table .ivu-table-cell {
        padding: 0 !important;

    }
</style>
<script>
    import EditRecomFert from './editRecomFert.vue'

    const multiRow = (h, data) => {
        let rows = [];
        data.forEach((item, index) => {
            rows.push(
                h('div', {
                    style: {
                        width: '100%',
                        height: "40px",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        borderBottom: index == data.length - 1 ? "none" : "1px solid #ccc"
                    }
                }, item)
            )
        });
        return h('div', {
            style: {
                width: "100%",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",

            }
        }, rows)
    }
    export default {
        components: {
            EditRecomFert,
        },
        data() {
            return {
                table_titles: [
                    {
                        title: '养分名称',
                        align: 'center',
                        key: 'name'
                    },
                    {
                        title: '土壤测试指标',
                        align: 'center',
                        key: 'item'
                    },
                    {
                        title: '单位',
                        key: 'unit',
                        align: 'center',
                        render: (h, params) => {
                            return h('p', {}, 'mg/kg')
                        }

                    },
                    {
                        title: '测试值',
                        align: 'center',
                        key: 'value',
                        padding: '0 0',
                        render: (h, params) => {
                            let data = []
                            params.row.value.forEach((item) => {
                                data.push(item.tv)
                            })
                            return multiRow(h, data);
                        }
                    },
                    {
                        title: '推荐量（公斤）',
                        key: 'dosage',
                        align: 'center',
                        render: (h, params) => {
                            let data = [];
                            params.row.dosage.forEach((item) => {
                                data.push(item.cv);
                            })
                            return multiRow(h, data)
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'do',
                        render: (h, params) => {
                            var btns = [];
                            var editBtn = h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.edit(params);
                                    }
                                },
                            }, "编辑");
                            var deleteBtn = h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: "您确认删除这条内容吗？",
                                    trnsfer: true,
                                },
                                on: {
                                    'on-ok': () => {
                                        this.delete(params)
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                    },
                                }, "删除")
                            ]);
                            btns.push(editBtn);
                            if (!(params.row.name == 'N' || params.row.name == 'P' || params.row.name == 'K')) {
                                btns.push(deleteBtn);
                            }
                            return h('div', btns)
                        }
                    }
                ],
                table_data: [
                    {
                        name: 'N',
                        item: '有机质(mg/kg)',
                        value: [{tv: '0～33'}, {tv: '33～34'}, {tv: '>34'}],
                        sortValue: [33, 34, 99999999999],
                        dosage: [{cv: 13}, {cv: 14}, {cv: 10}],
                        do: ''
                    },
                    {
                        name: 'P',
                        item: '速效磷(mg/kg)',
                        value: [{tv: '0~33'}, {tv: '33~34'}, {tv: '>34'}],
                        sortValue: [33, 34, 99999999999],
                        dosage: [{cv: 13}, {cv: 14}, {cv: 10}],
                        do: ''
                    },
                    {
                        name: 'K',
                        item: '速效钾(mg/kg)',
                        value: [{tv: '0~33'}, {tv: '33~34'}, {tv: '>34'}],
                        sortValue: [33, 34, 99999999999],
                        dosage: [{cv: 13}, {cv: 14}, {cv: 10}],
                        do: ''
                    },
                    {
                        name: 'K2SO4',
                        item: '硫酸钾(mg/kg)',
                        value: [{tv: '0~33'}, {tv: '33~34'}, {tv: '>34'}],
                        sortValue: [33, 34, 99999999999],
                        dosage: [{cv: 13}, {cv: 14}, {cv: 10}],
                        do: ''
                    },
                ],

                //编辑、添加
                edit_table_titles: [
                    {
                        title: '测试值',
                        align: 'center',
                        key: 'value',
                        render: (h, params) => {
//                            console.log("测试:", params.row.value)
                            return h('Input', {
                                props: {
                                    value: params.row.value,
                                },
                                style: {
                                    width: '100px'
                                }
                            })
                        }
                    },
                    {
                        title: '推荐量（公斤）',
                        key: 'dosage',
                        align: 'center',
                        render: (h, params) => {
//                            console.log("推荐：", params.row.dosage)
                            return h('Input', {
                                props: {
                                    value: params.row.dosage,
                                },
                                style: {
                                    width: '100px',
                                    textAlign: 'center',
                                }
                            })
                        }
                    },
                ],
                fromItem: {
                    nutrList: [],
                    elementList: [],
                    tableDatas: [],
                    showModal: false,
                    elementchose: '',
                    nutrchose: '',
                    optionsType: 'edit',//默认为编辑状态
                },
                rowParams: {},//当前选中的行信息
            }
        },
        methods: {
            clearData: function () {
                this.fromItem.nutrList = [];
                this.fromItem.elementList = [];
                this.fromItem.tableDatas = [];
                this.fromItem.showModal = false;
            },
            add: function () {
                this.clearData();
                this.fromItem.showModal = true;
                this.fromItem.nutrList = ['N', 'P', 'K', 'K2SO4'];
                this.fromItem.elementList = ['有机质(mg/kg)', '速效磷(mg/kg)', '速效钾(mg/kg)', '硫酸钾(mg/kg)']
//                this.fromItem.elementchose = '请选择';
//                this.fromItem.nutrchose = '请选择';
                this.$set(this.fromItem, "nutrchose", "")
                this.$set(this.fromItem, "elementchose", "")
                this.fromItem.optionsType = 'add';
                //添加数据 每次进来默认
                let defaultData = {
                    value: '统一推荐',
                    dosage: '10',
                    sortValue: '99999999999'
                }
                this.fromItem.tableDatas.push(defaultData);
            },
            edit: function (params) {
                this.clearData();//赋值之前清空
                this.rowParams = params;
                var item = params.row;
                //todo 这里数据类型需要重新构造
                this.fromItem.nutrList = ['N', 'P', 'K', 'K2SO4'];
                this.fromItem.elementList = ['有机质(mg/kg)', '速效磷(mg/kg)', '速效钾(mg/kg)', '硫酸钾(mg/kg)']
                var maxLength = item.dosage.length >= item.value.length ? item.dosage.length : item.value.length;
                for (var i = 0; i < maxLength; i++) {
                    let table = {
                        dosage: "",
                        value: "",
                        sortValue: ''
                    }
                    table.dosage = i < item.dosage.length ? item.dosage[i].cv : "";
                    table.value = i < item.value.length ? item.value[i].tv : "";
                    table.sortValue = item.sortValue[i];
                    this.fromItem.tableDatas.push(table);
                }
                this.fromItem.elementchose = item.item;
                this.fromItem.nutrchose = item.name;
                this.fromItem.showModal = true;
                this.fromItem.optionsType = 'edit';
                this.fromItem.rowParams = params;


            },
            delete: function (params) {
                this.table_data.splice(params.index, 1);
            },

            okModal: function () {
                var name = this.fromItem.nutrchose;
                var item = this.fromItem.elementchose;
                var value = [];
                var dosage = [];
                var sortValue = [];

                this.fromItem.tableDatas.forEach(function (item) {
                    value.push(item.value);
                    dosage.push(item.dosage);
                    sortValue.push(item.sortValue)
                })

                let data = {
                    name: name,
                    item: item,
                    sortValue: [],
                    value: [],
                    dosage: [],

                };
                for (var i = 0; i < value.length; i++) {
                    if (value[i] != "") {
                        data.value.push({
                            'tv': value[i]
                        });
                        data.sortValue.push(sortValue[i])
                        data.dosage.push({
                            'cv': dosage[i]
                        })
                    }
                }
                if (this.fromItem.optionsType == 'add') {
                    console.log("add", data);
                    this.table_data.push(data);
                } else {
                    //编辑状态
                    var index = this.rowParams.index;
                    console.log(this.table_data[index])
//                    this.table_data[this.rowParams.index]=data;
                    this.table_data[index].name = data.name;
                    this.table_data[index].item = data.item;
                    this.table_data[index].value = data.value;
                    this.table_data[index].sortValue = data.sortValue;
                    this.table_data[index].dosage = data.dosage;
                }

                console.log("数据更新了么：", this.table_data)
            },
            cancelModal: function () {
            },
            returnLastPage: function () {
                window.history.go(-1)
            }
        }
    }
</script>